<template>
    <div class="travel-map">
        <div id="main">

        </div>
    </div>
</template>
<script>
import geoJson from '@/assets/data.json'
import { travel} from '@/api/api.ts'
export default{
    data(){
        return {
           

        }
    },
    created() {
        travel().then(res=>{
            if(res.data.status===200){
                let { points,lineData}=res.data.data //解构赋值
                console.log(lineData);
                
                this.draw(points,lineData)
            }
        })
    },
   
    methods: {
        draw(points,lineData){
         let mychart=this.$echarts.init(document.getElementById('main'))
        this.$echarts.registerMap('china',geoJson) //注册可用的地图，必须包括geo组件或者map图表类型时候才可用
        let option={
            backgroundColor:'rgb(121,145,209)',
            //geo 是地图的 “容器”
            geo:{
                map:'china',
                aspectScale:0.75, //scale地图长宽比
                zoom:1.1,//缩放比例
                itemStyle:{
                    normal:{
                        areaColor:{
                            type:'radial',
                            x:0.5,
                            y:0.5,
                            r:0.8,
                            colorStops:[
                                {
                                    offset:0,
                                    color:"#09132c" //0%处的颜色
                                },
                                {
                                    offset:1,
                                    color:"#27d468"
                                }
                            ],
                            globalCoord:true//全局坐标系
                        },
                        shadowColor: 'rgb(58,115,192)',    // 阴影颜色（深蓝色）
                        shadowOffsetX: 10,                  // 阴影在X轴方向的偏移量（向右10px）
                        shadowOffsetY: 11,                  // 阴影在Y轴方向的偏移量（向下11px）
                    }
                },
                region:[{
                    name:'南海诸岛',
                    itemStyle:{
                        opacity:0.5
                    }

                }]
            },
            //series 是数据的 “画布”
            series:[
                //基础地图系列配置
                {
                    //配置地图相关参数，绘制地图，（关于地图图表相关设置）
                    type:'map',
                    //显示名称
                    label:{
                        normal:{
                            show:true,
                            textStyle:{
                                color:'#1DE9B6'
                            }
                        },
                        emphasis:{
                             textStyle:{
                                color:'rgb(183,185,14)'
                            }
                        }
                    },
                    zoom:1.1,//地图缩放比例
                    map:'china',
                     itemStyle:{
                        normal:{
                            backgroundColor:'rgb(147,235,248)',
                            borderWidth:1,//静态时边宽为1
                            areaColor:{
                                type:'radial',
                                x:0.5,
                                y:0.5,
                                r:0.8,
                                colorStops:[
                                    {
                                        offset:0,
                                        color:"rgb(31,54,150)" //0%处的颜色
                                    },
                                    {
                                        offset:1,
                                        color:"rgb(89,128,142)"
                                    }
                                ],
                                globalCoord:true
                            }
                        },
                        // // 鼠标悬浮时的样式
                        emphasis:{
                            areaColor:'rgb(46,229,206)',
                            borderWidth:0.1////悬浮时时边宽为0.1
                        }
                },
                },
                //关于地图中散点图的配置
                {
                    type:'effectScatter', //// 涟漪特效散点图
                    coordinateSystem:'geo', // 基于地理坐标系（需配合 `geo` 组件使用）
                    showEffectOn:'render',// 渲染时立即显示效果（默认是 `'emphasis'` 鼠标悬停时触发）
                    sysbolSize:10,       //散点大小
                    zlevel:1,//// 涟漪散点在地图之上
                    data:points,//渲染南京的位置
                    rippleEffect: {
                        period: 15,      // 涟漪扩散周期（秒），值越小扩散越快
                        scale: 4,        // 涟漪最大扩散比例（相对于散点大小）
                        brushType: 'fill' // 涟漪填充方式：'fill'（实心）或 'stroke'（描边）
                    }
                },
                //关于地图中线路动画效果设置
                {
                    type:'lines',//直线设置
                    zlevel:2, //值越大越在地图上面显示
                    effect:{//effect 是连线（lines）类型的一个重要配置项，用于设置连线的动态特效。
                        show:true,// 显示连线特效，通常是沿线路径的流动动画
                        period:4,
                        symbol:'arrow',
                        symbolSize:7,
                        trailLength:0.4
                    },
                    lineStyle:{
                        normal:{
                            color: '#1DE9B6',      // 线条颜色（亮青色）
                            width: 1,             // 线条宽度（像素）
                            opacity: 0.1,         // 透明度（0~1之间）
                            curveness: 0.3        // 曲线弯曲程度（0~1之间）
                        }
                    },
                    data:lineData
                }
            ]
        }
        mychart.setOption(option)
       }
    },
}
</script>

<style lang="scss">
.travel-map{
    width: 100%;
    #main{
        width: 100%;
        height:600px;
    }
}
</style>